<template>
	<view class="main">
		<view class="address">
			<image class="icon" src="@/static/img/address.png" mode=""></image>
			<view class="info">
				<view class="add">
					新陈路280弄莲鼎苑11号302
				</view>
				<view class="name">
					<span>111</span>
					<span>199*****1948</span>
				</view>
			</view>
			<image class="right" src="@/static/img/right.png" mode=""></image>
		</view>
		<view class="goodsinfo">
			<view class="goods">
				<view class="item">
					<view class="img">
						<image src="@/static/img/ceshi.jpg" mode=""></image>
					</view>
					<view class="txt">
						<view class="name">
							清利地喹氯铵含片慢性咽炎片咽喉炎肿痛口腔溃疡专用药咳嗽止咳
						</view>
						<view class="sku">
							xl
						</view>
						<view class="price">
							<span>￥120.0</span>
							<span class="num">X1</span>
						</view>
					</view>
				</view>
			</view>
			<ul class="priceList">
				<li>
					<view class="msg">
						商品总价：
					</view>
					<view class="price">
						￥120.0
					</view>
				</li>
				<li>
					<view class="msg">
						运费：
					</view>
					<view class="price">
						￥120.0
					</view>
				</li>
				<li>
					<view class="msg">
						实付金额：
					</view>
					<view class="price on">
						￥120.0
					</view>
				</li>
			</ul>
		</view>
		<view class="orderinfo">
			<h3>
				订单信息
			</h3>
			<view class="item one">
				<span>订单编号：123456</span>
				<view class="btn" @tap="copy('123456')">
					复制
				</view>
			</view>
			<view class="item">
				下单时间：2024-02-12 16:54:12
			</view>
			<view class="item">
				支付类型：微信支付
			</view>
		</view>
	</view>
</template>

<script>
	import {
		confirmOrder
	} from '@/api/user.js'
	export default{
		data(){
			return{
				
			}
		},
		onLoad(e) {
			uni.setNavigationBarTitle({
				title:e.txt
			})
			confirmOrder({
				id:e.id
			}).then(res => {
				console.log(res)
			})
		},
		methods:{
			copy(value){
				uni.setClipboardData({
				    data:value,//要被复制的内容
				    success:()=>{//复制成功的回调函数
				      uni.showToast({//提示
				        title:'复制成功'
				      })
				    }
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		min-height: calc(100vh - 44px);
		background-color: #F8F8F8;
		padding: 15px;
		.address{
			background-color: #fff;
			padding: 10px;
			border-radius: 5px;
			display: flex;
			align-items: center;
			position: relative;
			margin-bottom: 20px;
			.icon{
				width: 26px;
				height: 26px;
				margin-right: 7px;
			}
			.info{
				.add{
					color: #232323;
					font-size: 14px;
					margin-bottom: 13px;
				}
				.name{
					color: #333333;
					font-size: 12px;
					span{
						margin-right: 5px;
					}
				}
			}
			.right{
				position: absolute;
				right: 15px;
				width: 18px;
				height: 18px;
			}
		}
		.goodsinfo{
			background-color: #fff;
			padding: 15px 10px;
			border-radius: 5px;
			margin-bottom: 10px;
			.goods{
				display: flex;
				align-items: center;
				padding-bottom: 15px ;
				border-bottom: 1px solid #E4E4E4;
				margin-bottom: 12px;
				.img{
					margin-right: 10px;
					image{
						border-radius: 5px;
						width: 85px;
						height: 85px;
					}
				}
				.txt{
					height: 85px;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					.name{
						width: 100%;
						color: #232323;
						font-size: 13px;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 2;
						display: -webkit-box;
						-webkit-box-orient: vertical;
					}
					.sku{
						font-size: 13px;
						color: #888888;
					}
					.price{
						display: flex;
						justify-content: space-between;
						align-items: center;
						color: #CF4444;
						font-size: 13px;
						font-weight: 700;
						.num{
							color: #666666;
							font-size: 13px;
							font-weight: 400;
						}
					}
				}
			}
			.priceList{
				li{
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 13px;
					margin-bottom: 15px;
					.msg{
						color: #666666;
					}
					.price{
						color: #3D3D3D;
					}
					.on{
						font-size: 16px;
						color: #CF4444;
					}
				}
				li:last-child{
					margin-bottom: 0;
				}
			}
		}
		.orderinfo{
			padding: 15px;
			background-color: #fff;
			border-radius: 5px;
			h3{
				font-size: 13px;
				color: #333333;
				margin-bottom: 10px;
			}
			.item{
				font-size: 13px;
				color: #333333;
				margin-bottom: 10px;
			}
			.one{
				display: flex;
				align-items: center;
				.btn{
					padding: 3px 10px;
					font-size: 12px;
					color: #ABABAB;
					border: 1px solid #ABABAB;
					border-radius: 100px;
					margin-left: 5px;
				}
			}
			.item:last-child{
				margin-bottom: 0;
			}
		}
	}
</style>